<template>
  <div>
    <!--条件筛选-->
    <TopFilter :list="topFilterList" :isSubmitBtn="false" labelWidth="85" @filterChange="changeHandle"></TopFilter>
    <FilterTable
      ref="table"
      columnsRef="lxxTechnicianScheduling"
      :columns="columns"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :onColumnsChange="columns => (this.columns = columns)"
      :onRowSelectChange="selectHandler"
    >
      <template slot="controls">
        <AjaxButton size="small" type="primary" :loading="loading" :click="AllHandle">全部排班</AjaxButton>
      </template>
    </FilterTable>

    <BaseDialog :visible.sync="visible" title="排班表" destroyOnClose width="530px" :containerStyle="{ height: 'calc(100% - 40px)', overflow: 'auto', paddingBottom: '60px' }" @close="closeHandler">
      <Details :rowData="initArr" :initalValue="initalValue" :date="dateChange" @close="closeHandler" />
    </BaseDialog>
    <Drawer
      :visible.sync="visibleAll"
      title="全部排班表"
      width="1080px"
      destroyOnClose
      :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }"
      @close="closeHandlerAll"
    >
      <allTechnician :initalValue="initalValue" :dateChange="dateChange" @close="closeHandlerAll" />
    </Drawer>
  </div>
</template>

<script>
/**
 * 维护技师排班表
 * 芦小星
 */
import { dictionary } from '@/utils/dictMixin';
import { isFormEmpty } from '@/utils';
import { confirmAction, notifyAction } from '@/utils';
import Details from './details';
import { getList, PersonList, getAllList } from '@/api/repair/workshopManagement/technicianScheduling/index';
import allTechnician from './allTechnician';
import moment from 'moment';
export default {
  name: 'lxxTechnicianScheduling',
  components: { Details, allTechnician },
  mixins: [dictionary],
  data() {
    return {
      topFilterList: this.createTopFilterList(),
      fetchParams: {},
      fetchApi: getList,
      columns: this.createTableColumns(),
      fileInitalValue: [],
      orderTypeIsSetMeal: false,
      formData: {},
      loading: false,
      visibleAll: false,
      visible: false,
      dateChange: moment().format('YYYY-MM-DD'),
      initalValue: [],
      initArr: {},
      tableData: []
    };
  },
  mounted() {
    // 分页
    this.BaseTable = this.$refs.table.$refs.pageTable;
  },
  methods: {
    createTopFilterList() {
      return [
        {
          type: 'DATE',
          label: '排班日期',
          fieldName: 'CREATED_AT',
          dateFormat: 'yyyy-MM-DD',
          dateType: 'month',
          initialValue: moment().format('YYYY-MM-DD'),
          change: val => {
            console.log('排班日期', val);
            this.dateChange = val;
          },
          rules: [{ required: true, message: '请选择排班日期', trigger: 'change' }]
        }
      ];
    },
    createTableColumns() {
      return [
        {
          title: '操作',
          dataIndex: 'column-action',
          fixed: 'left',
          render: (props, h) => {
            return (
              <div>
                <el-button size="mini" type="text" onClick={() => this.detailHandle(props.row)}>
                  排班详情
                </el-button>
              </div>
            );
          }
        },
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '班组名称',
          dataIndex: 'WORKGROUP_NAME',
          showOverflowTooltip: true,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '技师代码',
          showOverflowTooltip: true,
          dataIndex: 'USER_CODE',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '技师名称',
          dataIndex: 'EMPLOYEE_NAME',
          filterType: 'input',
          sorter: true,
          disabled: true,
          filter: true,
          defaultEditable: true
        },
        {
          title: '最后排班日期',
          dataIndex: 'LAST_TIME',
          showOverflowTooltip: true,
          filterType: 'date-range',
          filter: true,
          sorter: true,
          dateFormat: 'yyyy-MM-dd'
        }
      ];
    },
    async AllHandle() {
      this.loading = true;
      this.initalValue = [];
      await this.getAllList();
      this.visibleAll = true;
      console.log('this.AllHandle', this.initalValue);
      this.loading = false;
    },
    async searchList(date, id) {
      const res = await PersonList({ CREATED_AT: date, USER_ID: id });
      console.log(res.data);
      if (res.resultCode == 200) {
        this.initalValue = res.data;
        console.log(333, this.initalValue);
      }
    },
    // 行选中状态变化时的回调
    selectHandler(val) {
      console.log(val);
    },
    changeHandle(val) {
      this.fetchParams = Object.assign({}, val);
    },
    async getAllList() {
      const res = await getAllList({ date: this.dateChange });
      this.initalValue = res.data.map(x => ({ date: x.ON_DUTY, num: x.CONT }));
    },
    detailHandle(val) {
      console.log(val, '排班详情', this.dateChange);
      this.initArr = val;
      if (isFormEmpty(this.dateChange)) {
        return notifyAction('请选择排班日期', 'error');
      } else {
        this.$refs.table.START_LOADING();
        PersonList({ CREATED_AT: this.dateChange, USER_ID: val.USER_ID }).then(res => {
          if (res.resultCode == 200) {
            // this.initalValue = res.data;
            this.initalValue = res.data.map(x => ({ date: x, num: '' }));
            console.log('主页的personList', this.initalValue);
            this.visible = true;
          }
        });
        this.$refs.table.STOP_LOADING();
      }
    },
    closeHandler() {
      this.visible = false;
      this.fetchParams = { ...this.fetchParams };
    },
    closeHandlerAll() {
      this.visibleAll = false;
      this.fetchParams = { ...this.fetchParams };
    }
  }
};
</script>

<style lang="less" scoped></style>
